import '../styles/components.scss'
import { Descriptions } from 'antd'
import { useSearchParams } from 'react-router-dom'
import { useStore } from '@/store'
import { useState, useEffect } from 'react'
import { forms } from '@/static/forms';



const SimpleDetails = (props) => {
    const [params] = useSearchParams()
    const id = params.get("id")
    const api = params.get("api")
    const details = forms[api] ? forms[api] : []
    const { operateStore } = useStore()
    const [items, setItems] = useState()

    useEffect(() => {
        const loadDetail = async () => {
            const data = await operateStore.getDetails(api, id)
            setItems(data)
        }
        loadDetail()
      }, [api, id, operateStore])
      
    details.map(item => {
        return item["value"] = items?(items[item.name]?items[item.name]:""): ""
    })
    return (
        <div>
            {details && details.length > 0 && (
                <Descriptions title="详细信息" bordered column={1}>
                    {
                        details.map(item => {
                             return <Descriptions.Item label={item.label}>{item.value}</Descriptions.Item>
                        })
                    }
                </Descriptions>
            )}
    
        </div>
  )
}


export default SimpleDetails